<template>
	<view>
		<view class="TopBox">
			<view class="example-body">
				<view class="tips">
					<text>上传助教图片</text>
				</view>
				<view class="image">
					<uni-file-picker limit="1" :del-icon="true" disable-preview :imageStyles="imageStyles"
						file-mediatype="image" @select="select">点击选择图片</uni-file-picker>
				</view>
			</view>
			<view class="list">
				<view class="left">
					<text>名称</text>
				</view>
				<view class="right">
					<input type="text" placeholder='请输入助教名称' v-model="name">
				</view>
			</view>
			<view class="list">
				<view class="left">
					<text>收费</text>
				</view>
				<view class="right">
					<input type="text" placeholder='请输入助教价格' v-model="price">
				</view>
			</view>
			<view class="list">
				<view class="left">
					<text>排班</text>
				</view>
				<view class="right">
					<input type="text" placeholder='请输入助教排班时间' v-model="time">
					<!-- <uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />					 -->
				</view>
			</view>
			<view class="list">
				<view class="left">
					<text>助教号码</text>
				</view>
				<view class="right">
					<input type="text" placeholder='请输入助教号码' v-model="barcode">
				</view>
			</view>
			<!-- <view class="list">
				<view class="left">
					<text>助教描述</text>
				</view>
				<view class="right">
					<input type="text" placeholder='请输入助教描述' v-model="description">
				</view>
			</view> -->
			<!-- <view class="textlist">
				<input type="text" placeholder="请输入助教描述">
			</view> -->
			<view class="addbox">
				<view class="btn" @click="addTeacher">
					<text>确认添加</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				price: '',
				time: '',
				// teacherText:"",
				url: '',
				description:'',
				barcode:'',
				// range: ['2021-02-1', '2021-3-28'],
				imageStyles: {
					width: 164,
					height: 164,
					border: { // 如果为 Boolean 值，可以控制边框显示与否
						color: "#fff", // 边框颜色
						width: "1px", // 边框宽度
						style: "dashed", // 边框样式						
					}
				},
			};
		},
		methods: {
			async addTeacher() {
				const data = {
					salePrice: this.price,
					imageUrl: this.url,
					name: this.name,
					vipPrice: this.time,
					barcode:this.barcode,
					// description:this.description,
					goodsType: 1,
					storeId: uni.getStorageSync('storeId')
				};
				const {
					data: res
				} = await uni.$http.post(
					`/store/addGoodsByBarcode`, data
				);
				if (res.code !== 0) return uni.$showMsg(res.message);
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
				console.log(res, '新建助教成功!');
				uni.$showMsg('添加成功!')
			},
			select(e) {
				console.log(e);
				uni.uploadFile({
					url: 'https://jkht.wteam.club/common/uploadFile',
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						"Content-Type": "multipart/form-data",
						"Authorization": uni.getStorageSync('token'),
					},
					success: (res) => {
						if (JSON.parse(res.data).code == 200) {
							console.log(JSON.parse(res.data).urls);
							this.url = JSON.parse(res.data).urls;
						} else {
							uni.$showMsg(res.msg);
							console.log(res);
						}
					},
					fail: (res) => {
						uni.$showMsg(res.msg);
					}
				})
			}
			// maskClick(e) {
			// 	console.log('maskClick事件:', e);
			// }
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #f6f8fc;
	}

	.addbox {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 7vh;

		.btn:active {
			background-color: rgba(79, 190, 241, 0.5);
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 6vh;
			width: 80%;
			color: #fff;
			background-color: #4267ff;
			font-size: 4vw;
		}
	}

	.textlist {
		width: 100%;
		height: 7vh;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 2vw;
		padding-left: 3vw;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		input {
			width: 100%;
		}
	}

	.list {
		width: 100%;
		height: 7vh;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1vw;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		.left {
			margin-left: 2vw;
		}

		.right {
			margin-right: 5vw;
			font-size: 35rpx;
			display: flex;

			input {
				width: 60vw;
			}

		}
	}

	.example-body {
		padding: 3vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		// background-color: #fff;
		.image {
			margin-top: 3vh;
			background-color: #fff;
			box-shadow: 2rpx 4rpx 16rpx rgba(0, 0, 0, 0.1);
			color: #1a91ff;
		}

	}
</style>